<template>
  <div>
    <wbc-nav></wbc-nav>
    <div class="container">
      <el-row :gutter="30">
        <el-col
          :sm="24"
          :md="16"
          style="transition: all 0.5s ease-out; margin-bottom: 30px"
        >
          <el-row class="sharelistBox">
            <el-col
              :span="24"
              class="s-item tcommonBox"
              style="z-index: index 1; height: 700px; position: relation"
            >
              <el-input
                style="
                  margin-left: 25%;
                  width: 50%;
                  margin-bottom: 2%;
                  color: red;
                "
                placeholder="请输入标题"
                @blur="check"
                v-model="name"
                :disabled="!show"
                clearable
              >
              </el-input>
              <el-button
                type="primary"
                round
                v-if="show"
                @click="upload"
                style="
                  position: absolute;
                  z-index: 999;
                  bottom: 5px;
                  right: 5px;
                "
                >完成写作</el-button
              >
              <mavon-editor
                v-model="value"
                :editable="show"
                defaultOpen="edit"
                placeholder="想好要编辑什么了吗，宝贝！"
              />
            </el-col>
          </el-row>
        </el-col>
        <el-col :sm="24" :md="8">
          <wbc-rightlist></wbc-rightlist>
        </el-col>
      </el-row>
    </div>
    <wbc-footer></wbc-footer>
  </div>
</template>

<script>
import header from "../components/header.vue";
import footer from "../components/footer.vue";
import temSharelist from "../components/temSharelist.vue";
import temRightlist from "../components/temRightlist.vue";
import { uploadOnineWrite } from "../utils/server";
export default {
  name: "WriteMd",
  data() {
    return {
      value: "",
      show: "",
      name: "",
    };
  },
  mounted() {
    this.show = localStorage.getItem("show") == "true";
  },
  methods: {
    upload() {
      if (this.name == "") {
        this.$message({
          message: "请填写标题名字再上传哟",
          type: "warning",
        });
      } else {
        if (this.value == "") {
          this.$message({
            message: "请写上文章再上传哟",
            type: "warning",
          });
        } else {
          let info = {
            name: this.name,
            value: this.value,
          };
          uploadOnineWrite(info, (msg) => {
            if (msg.code == 200) {
              this.name = "";
              this.value = "";
              this.$message({
                message: "上传文章成功",
                type: "success",
              });
              this.$router.push({
                path:"/WriteMd"
              })
            } else {
              this.$message({
                message: "上传文章失败",
                type: "warning",
              });
            }
          });
        }
      }
    },
    check() {
      if(this.name == '') {
        this.$message({
          message: "想要写文章要先填写标题哟",
          type: "warning",
        });
      }
    }
  },
  components: {
    //定义组件
    "wbc-nav": header,
    "wbc-sharelist": temSharelist,
    "wbc-rightlist": temRightlist,
    "wbc-footer": footer,
  },
};
</script>

<style>
.markdown-body {
  z-index: 1 !important;
  display: block !important;
  height: 85%;
  overflow: auto;
}
</style>